<template>

  <el-card class="video-box-con">

    <el-row :gutter="20" >
      <!--引入西瓜播放器-->
      <XiGuaPlayer ref="XiGuaPlayerRef" ></XiGuaPlayer>
    </el-row>

    <el-row :gutter="20" >
      <!--可播放视频列表-->
      <el-col :span="24" >
        <el-table max-height="560"
                  :data="videoResourceList"
                  style="width: 100%">
          <el-table-column
            prop="name"
            label="视频名称">
          </el-table-column>

          <el-table-column
            prop="length"
            label="资源大小">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            min-width="100"
            width="100">
            <template slot-scope="scope">
              <el-button @click="playVideo(scope.row)" type="text" size="small">播放</el-button>
              <el-button @click="delPlayVideoTips(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>

    <el-row :gutter="20" >
      <el-col :span="12">
        <p>开发</p>
        <img :src="base64PageImageDev" v-if="base64PageImageDev" />
      </el-col>
      <el-col :span="12">
        <p>生产</p>
        <img :src="base64PageImagePred" v-if="base64PageImagePred" />
      </el-col>
    </el-row>

  </el-card>


</template>

<script>

  import http from '@/utils/http'
  import XiGuaPlayer from '@/components/common/XiGuaPlayer.vue'

  export default {
    name: "VideoPlayback",
    components: {
      XiGuaPlayer
    },
    data(){
      return {
        // 可查看视频资源列表
        videoResourceList: [],
        // 播放访问地址
        server: null,
        // base64的二维码图片- 开发
        base64PageImageDev: null,
        // base64的二维码图片- 生产
        base64PageImagePred: null,
        // 服务器的IP地址 + 端口 + 路径后缀
        ip: '127.0.0.1:8084/ps',
      }
    },
    methods: {
      /**
       * 播放视频
       * @param row 当前数据
       */
      playVideo(row){
        if (this.server){
          // 一定要进行编码处理，否则可能因为地址的问题异常
          let url = this.server + encodeURIComponent(row.path)
          this.$refs.XiGuaPlayerRef.playXiGua(url, 'mp4')
        }
      },
      /**
       * 删除视频-提示
       * @param row 视频信息
       */
      delPlayVideoTips(row){
        this.$confirm('是否该删除该视频, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delPlayVideo(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 删除视频
       * @param row 视频信息
       */
      delPlayVideo(row){
        http.post("/video/delPlayVideo", {
          path: row.path,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getResourcesList()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 生成二维码
       * @param url 页面二维码
       */
      getPageUrl(url){
        http.post("/video/getPageUrl", {
          dev: 'dev',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64PageImageDev = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })

        // 生产的
        http.post("/video/getPageUrl", {
          dev: 'prod',
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.base64PageImagePred = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取服务器播放地址
       */
      getServerAddress(){
        http.get("/video/getServerAddress", {
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.server = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 读取可查看的视频的资源
       */
      getResourcesList(){
        http.post("/video/getResourcesList", {
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.videoResourceList = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取服务器IP地址
       */
      getIp(){
        http.get("/video/getIp", {
        }).then(response => {
          if (!response){
            return
          }
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            this.$message.error("无法访问，请检查前端配置是否配置正确的IP地址");
            return
          }
          this.ip = res.data

          this.getServerAddress()
          this.getResourcesList()
          this.getPageUrl()


        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getIp()
    },
  }
</script>

<style scoped>
.video-box{
  min-width: 900px;
  overflow-x: auto;
}
.video-box-top{
  min-width: 130px;
  margin-bottom: 10px;
}
.video-box-con{
  position: relative;
}
</style>
